<template>
	<view>
		<view class="Modal_mask" @click.stop="closes"></view>
		<view class="Modal_Modal">
			<view class="Modal_title">
				<text class="no" @click.stop="closes">取消</text>
				<text class="one">选择付款方式</text>
				<text class="yes" @click.stop="confirm">确认</text>
			</view>
			<view class="list">
				<view class="block" @click="type=0">
					<view class="left" :class="type==0?'active':''">
						<image style="height: 38rpx;" src="/static/c2c/yhk.png" mode=""></image>
						<text class="name">银行卡</text>
					</view>
				</view>
				<view class="block" @click="type=1">
					<view class="left" :class="type==1?'active':''">
						<image src="/static/c2c/zfb.png" mode=""></image>
						<text class="name">支付宝</text>
					</view>
				</view>
				<view class="block" @click="type=2">
					<view class="left" :class="type==2?'active':''">
						<image src="/static/c2c/wx.png" mode=""></image>
						<text class="name">微信</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
export default {
	name: 'trade-modal',
	components: { uniIcons },
	props: {
		type: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			
		};
	},
	methods: {
		hideModal() {
			if (this.isMask) {
				this.$emit('close');
			}
		},
		closes() {
			this.$emit('close');
		},
		confirm() {
			this.$emit('confirm');
		}
	}
};
</script>

<style lang="scss">
.Modal_mask {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9993;
}
.Modal_Modal {
	position: fixed;
	z-index: 9999;
	bottom: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0px 0px 2rpx 0px rgba(0, 0, 0, 0.54);
	view,text {
		font-weight: bold;
	}
	.Modal_title {
		padding: 24rpx 40rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		border-bottom: 2rpx solid #e7ebee;
		.no {
			font-weight: bold;
			color: #c5cfd5;
		}
		.one {
			font-size: 36rpx;
			font-weight: bold;
		}
		.yes {
			font-weight: bold;
			color: $blue;
		}
	}
	.list {
		padding-bottom: 138rpx;
		.block {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 48rpx auto;
			text {
				color: #C5CFD5;
				font-size: 32rpx;
			}
			.left {
				display: flex;
				align-items: center;
				&.active {
					text {
						color: #1F3F59;	
					}
				}
				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 16rpx;
				}
				.name {
					width: 100rpx;
				}
			}
		}
	}
}
</style>
